<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-button type="primary" @click="addroledialog">添加角色</el-button>
                </el-col>
            </el-row>
            <el-table border :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}" stripe :data="roleslist"> 
                <el-table-column type="expand" width="80px" label="扩展">
                    <template slot-scope="scope">
                        <el-row v-for="(item,i1) in scope.row.children" :key="item.id" 
                        :class="['bdbottom',i1==0?'bdtop':'bdbottom','center_table']">
                            <el-col :span="5">
                                <el-tag>{{item.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="19">
                                <el-row v-for="(item1,i2) in item.children" :key="item1.id" 
                                :class="['bdbottom',i2==0?'':'bdtop','center_table']">
                                    <el-col :span='6'>
                                        <el-tag type="success">{{item1.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span='18'>
                                        <el-col :span='6' v-for="(item2,i3) in item1.children" :key="item2.id" 
                                        :class="['bdbottom',i3==0?'':'bdtop','center_table']">
                                            <el-tag type="success" closable
                                            @close="deleteright(item2.id,scope.row)">{{item2.authName}}</el-tag>
                                        </el-col>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column type="index" width="80px" label="序号"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editrole(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-s-tools" size="mini" @click="assignright(scope.row)"></el-button>
                        <el-button type="info" icon="el-icon-delete" size="mini" @click="deleterole(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 添加角色对话框 -->
        <el-dialog
        title="提示"
        :visible.sync="addroledialogVisible"
        width="40%"
        @close="roledialogreset">
        <el-form :model="roleinfo" :rules="addformroles" label-position="left" label-width="80px" ref="addRoleRef">
            <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="roleinfo.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="roleinfo.roleDesc"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addroledialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addrole">确 定</el-button>
        </span>
        </el-dialog>
        <!-- 编辑角色对话框 -->
        <el-dialog
            title="提示"
            :visible.sync="editroledialogVisible"
            width="40%"
            @close="editroledialogreset">
            <el-form :model="eidtroleinfo" :rules="addformroles" label-position="left" label-width="80px" ref="editRoleRef">
                <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="eidtroleinfo.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                <el-input v-model="eidtroleinfo.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editroledialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editrolesubmit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分配权限对话框 -->
        <el-dialog
            title="提示"
            :visible.sync="assignrightdialogVisible"
            width="40%"
            @close="rightreset">
            <el-tree :data="rightslist" :props="defaultProps" show-checkbox node-key="id"
            default-expand-all :default-checked-keys="defkeys" ref="treeref"></el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="assignrightdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateright">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    created() {
        this.getroleslist();
    },
    data() {
        return {
           roleslist:[] ,
           roleinfo:{
               roleName:"",
               roleDesc:"",
           },
           eidtroleinfo:{
            roleId:"",
            roleName:"",
            roleDesc:"",
           },
           defaultProps:{
            children: 'children',
            label: 'authName'
           },
           rightslist:[],
           addroledialogVisible:false,
           editroledialogVisible:false,
           assignrightdialogVisible:false,
           addformroles:{
            roleName:[
                { required: true, message: '请输入角色名称', trigger: 'blur' },
                {
                    min: 2,
                    max: 10,
                    message: '角色名称的长度在3~10个字符之间',
                    trigger: 'blur'
                }
            ],
            roleDesc:[
            { required: true, message: '请输入角色描述', trigger: 'blur' },
            {
                min: 3,
                max: 10,
                message: '角色描述的长度在3~10个字符之间',
                trigger: 'blur'
            }  
            ],
           },
           defkeys:[],
           roleId:""
        }
    },
    methods: {
        getroleslist:async function() {
            const {data:res} =await this.$http.get("roles");
            if(res.meta.status==200) {
                this.roleslist=res.data;
            }
            else {
                this.$alert("请求数据失败","消息提示",{
                    confirmButtonText: "确定"
                })
            } 
        },
        addroledialog:function() {
            this.addroledialogVisible=true;
        },
        addrole:function() {
            this.$refs.addRoleRef.validate(async (valid)=>{
                if(!valid) return;
                const {data:res} =await this.$http.post("roles",this.roleinfo);
                if(res.meta.status==201) {
                    this.$alert("添加角色成功","消息提示",{
                        confirmButtonText:"确定"
                    });
                    this.addroledialogVisible=false;
                    this.getroleslist();
                }
                else {
                    this.$alert("添加用户失败","消息提示",{
                        confirmButtonText:"确定"
                    })
                }
            })
        },
        editrole:async function(userinfo) {
            const {data:res} =await this.$http.get(`roles/${userinfo.id}`);
                if(res.meta.status==200) {
                    this.eidtroleinfo.roleId=res.data.roleId;
                    this.eidtroleinfo.roleName=res.data.roleName;
                    this.eidtroleinfo.roleDesc=res.data.roleDesc;
                    this.editroledialogVisible=true;
                }
                else {
                    this.$alert("角色获取失败","消息提示",{
                        confirmButtonText:"确定"
                    })
                }
        },
        deleterole:async function(userinfo) {
            const {data:res} =await this.$http.delete(`roles/${userinfo.id}`);
                if(res.meta.status==200) {
                    this.$alert("删除角色成功","消息提示",{
                        confirmButtonText:"确定"
                    });
                    this.getroleslist();
                }
                else {
                    this.$alert("删除用户失败","消息提示",{
                        confirmButtonText:"确定"
                    })
                }
        },
        roledialogreset:function() {
            this.$refs.addRoleRef.resetFields();
        },
        editroledialogreset:function() {
            this.$refs.editRoleRef.resetFields();
        },
        editrolesubmit:function() {
            this.$refs.editRoleRef.validate(async (valid)=>{
                if(!valid) return;
                const {data:res} =await this.$http.put(`roles/${this.eidtroleinfo.roleId}`,{
                    'roleName':this.eidtroleinfo.roleName,
                    'roleDesc':this.eidtroleinfo.roleDesc
                });
                if(res.meta.status==200) {
                    this.$alert("修改角色成功","消息提示",{
                        confirmButtonText:"确定"
                    });
                    this.editroledialogVisible=false;
                    this.getroleslist();
                }
                else {
                    this.$alert("修改角色失败","消息提示",{
                        confirmButtonText:"确定"
                    })
                }
            })
        },
        assignright:async function(rightinfo) {
            const {data:res} =await this.$http.get("rights/tree");
            if(res.meta.status!=200) {
                return this.$alert("数据请求失败","消息提示",{
                    confirmButtonText:"确定"
                });
            }
            this.roleId=rightinfo.id;
            this.rightslist=res.data;
            this.getleafkeys(rightinfo,this.defkeys)
            this.assignrightdialogVisible=true;
        },
        getleafkeys:function(node,arr) {
            if(!node.children) {
                return arr.push(node.id)

            }
            node.children.forEach(item => {
                this.getleafkeys(item,arr)
            });
        },
        rightreset:function() {
            this.defkeys=[];
        },
        deleteright:async function (rightid,role) {
            const {data:res} =await this.$http.delete(`roles/${role.id}/rights/${rightid}`);
            console.log(res);
            if(res.meta.status!=200) {
                return this.$alert("删除权限失败","消息提示",{confirmButtonText:"确定"})
            }
            this.$alert("删除权限成功","消息提示",{confirmButtonText:"确定"});
            role.children=res.data;
        },
        updateright:async function() {
            var keys=[...this.$refs.treeref.getCheckedKeys(),...this.$refs.treeref.getHalfCheckedKeys()];
            const idstr=keys.join(',');
            console.log(this.roleId);
            const {data:res} =await this.$http.post("roles/"+this.roleId+"/rights",{
                rids:idstr
            });
            console.log(res);
            if(res.meta.status!=200) {
                return this.$alert("分配权限失败","消息提示",{confirmButtonText:"确定"})
            }
            this.$alert("分配权限成功","消息提示",{confirmButtonText:"确定"})
            this.getroleslist();
            this.assignrightdialogVisible=false;
        }
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
  }
.el-breadcrumb {
    margin-left: 170px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.el-breadcrumb-item {
    font-size: 20px;
}
.box-card {
    width: 1200px;
    margin: 0 auto;
}
.el-table {
    margin-top: 10px;
}
.el-table-column {
    border-bottom: 1px solid black;
}
.bdtop {
    border-top: 1px solid #eee;
}
.bdbottom {
    border-bottom: 1px solid #eee;
}
.el-row {
    padding: 5px 0;
}
.el-col {
    padding: 5px 0;
}
.center_table {
    display: flex;
    align-items: center;
}
</style>